<template>
  <div class="home">
    <main>
      <van-image
        class="logo"
        src="https://huangshen.oss-cn-beijing.aliyuncs.com/yao-shop/favicon.ico"
      ></van-image>
      <div class="my-info my-card">
        <div v-if="state.login">
          <h2>{{ state.userInfo.userName }}</h2>
          <h5>{{state.userInfo.userTel}}</h5>
        </div>
        <div v-else @click="gotoLogin">
          <h2>点击登录</h2>
        </div>
        <van-image
        v-if="state.login"
          round
          width="56px"
          height="56px"
          :src="state.userInfo.userImg"
        ></van-image>
      </div>
    </main>
    <div class="order my-card">
      <van-grid clickable :border="false">
        <van-grid-item
          icon="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/icon/daizhifu.png"
          text="待支付"
        />
        <van-grid-item
          icon="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/icon/lianxikefu.png"
          text="咨询中"
        />
        <van-grid-item
        :dot="state.login"
          icon="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/icon/daipingjia.png"
          text="待评价"
        />
        <van-grid-item
          icon="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/icon/dingdan.png"
          text="全部"
        />
      </van-grid>
    </div>
    <div class="my-card">
      <van-grid clickable :border="false" :column-num="1">
         <van-grid-item text="询医结果" to="/case" />
        <van-grid-item text="信息修改" />
        <van-grid-item v-if="state.login"  @click="loginOut" >
          <van-button type="danger" size="large">退出</van-button>
        </van-grid-item>
      </van-grid>
    </div>
    <van-tabbar route>
      <van-tabbar-item icon="wap-home-o" to="/index">主页</van-tabbar-item>
      <van-tabbar-item icon="chat-o" to="/messages">消息</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/home"> 我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// @ is an alias to /src
import { defineComponent, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { useStore } from "vuex";
export default defineComponent({
  name: "Index",

  created() {
    //session 中取 用户信息
    this.state.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    if (this.state.userInfo) {
      this.state.login = true;
      //环信登录
      this.initWebIM();
    } else {
      this.state.login = false;
    }
  },

  setup() {
    //实例化store
    const store = useStore();
    //实例化路由
    const router = useRouter();

    //下拉刷新 状态
    const state = reactive({
      login: false,
      userInfo: {},
    });

    // 使用 mutation
    const initWebIM = () =>
      store.commit("initWebIM", {
        userName: 'hx'+state.userInfo.userId,
        passWord: '111111'
      });

    const loginOut=()=>{
      localStorage.removeItem("userInfo")
      state.userInfo={}
       store.commit("closeWebIM");
       location.reload()
    }
    //下拉刷新 回调
    const onRefresh = () => {
      setTimeout(() => {
        Toast("刷新成功");
        state.loading = false;
        state.count++;
      }, 1000);
    };
    //去登录
    const gotoLogin = () => {
      router.push("/login");
    };
    return {
      state,
      onRefresh,
      gotoLogin,
      initWebIM,
      loginOut
    };
  },
});
</script>


<style lang="less" scoped>
.home {
  text-align: left;
}
.my-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

main {
  position: relative;
  padding: 0 20px;
  padding-top: 100px;
  background: #1989fa;

  border-bottom-left-radius: 150px;
  border-bottom-right-radius: 150px;
}
.my-card {
  background: #fff;
  padding: 20px 30px;
  border-radius: 20px;
  box-shadow: 0 8px 12px #ebedf0;
  margin-bottom: 20px;
}
.my-info h2 {
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
}
.my-info h5 {
  margin: 0;
  padding: 0;
}
.logo {
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
}
</style>